<template>
  <div class="_battle-wait" :class="{ _mobile: props.isMobile }">
    <div class="_box-item" v-for="item in props.boxList" :key="item.id">
      <img :src="item.image" />
      <price-btn :price="Number(item.amount || 0)" />
    </div>
  </div>
</template>

<script lang="tsx" setup>
import PriceBtn from "@/components/PriceBtn/price-btn.vue";

import { battleWaitProps } from "./battleWait";

const props = defineProps(battleWaitProps);
</script>

<style lang="less" scoped>
._battle-wait {
  @apply flex items-stretch;
  gap: 0.75rem;
  height: 20.01rem;
  overflow: hidden;
  ._box-item {
    @apply flex flex-col;
    flex-shrink: 0;
    gap: 0.69rem;
    width: 11.56rem;
    height: 100%;
    background-color: #232829;
    border-radius: var(--el-border-radius-base);
    img {
      @apply flex-1 h-0;
      width: 100%;
      object-fit: contain;
    }
  }

  &._mobile {
    gap: 1.81rem;
    height: auto;
    width: 100%;
    overflow: auto;
    ._box-item {
      width: calc((100% - 1.81rem) / 2);
    }
  }
}
</style>
